<template>
  <div>
 
     
      <!-- 选项卡区域 -->
       <el-tabs v-model="activeName" >
        <el-tab-pane label="个人信息" name="first">
            <div class="profileBox">
            <div class="avatarBox">
               <img :src="avatarUrl" alt="">
            </div>
            <div class="infoBox">
                  <div><span>用户名:{{profile.username}}</span></div>
                  <div><span>昵称:{{profile.nickName || '暂无'}}</span></div>
                  <div><span>年龄:{{profile.age || '暂无'}}</span></div>
                  <div><span>性别:{{profile.sex || '暂无'}}</span></div>
                  <div><span>电子邮箱:{{profile.email}}</span></div>
                  <div><span>电话号码:{{profile.phone || '暂无'}}</span></div>
            </div>
            <!-- <div class="describeBox">
                <div>备注：</div>
                 <textarea name="" id="" cols="30" rows="10"></textarea>
            </div> -->
 
          </div>
        </el-tab-pane>
        <el-tab-pane label="编辑资料" name="second">
          <!-- 编辑资料 -->
          <div class="editBox">
               <div class="avatarBox">
                    <div class="title"><span>点击修改头像：</span></div>
                    <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8888/upload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
               </div>
               
               <el-form  label-width="100px" :model="editForm">
                 <el-form-item label="昵称：">
                  <el-input v-model="editForm.nickName"></el-input>
                 </el-form-item>
                  <el-form-item label="年龄：">
                  <el-input v-model="editForm.age" aria-placeholder="哈哈哈"></el-input>
                 </el-form-item>
                  <el-form-item label="性别：">
                  <el-input v-model="editForm.sex"></el-input>
                 </el-form-item>  
                  <el-form-item label="电子邮箱：">
                  <el-input v-model="editForm.email"></el-input>
                 </el-form-item>
                  <el-form-item label="电话号码：">
                  <el-input v-model="editForm.phone"></el-input>
                 </el-form-item>
             
                 <div class="btns">
                      <el-button type="primary" @click="editUserInfo">保存编辑</el-button>
                 </div>
               </el-form>
       

          
          </div>
        
    
    
        </el-tab-pane>
    
      </el-tabs>
        

  </div>
</template>

<script>
import { mapState,mapActions} from 'vuex'
import Api from '../../api/index'
export default {
    data() {
      return {
        activeName:'first',
        editForm:{},
        imgUrl:'',


      }
    },
    computed:{
       ...mapState('login',["userInfo"]),
       avatarUrl(){
         return this.userInfo.profile.avatarUrl;
       },
       profile(){
         return this.userInfo.profile;
       }
    },
    created() {
        this.getUserInfo();
    },
    methods: {
      ...mapActions('login',["setProfile"]),
      async getUserInfo(){
          const {data:res} = await Api.getUserInfo(this.userInfo.profile.uid);
          if(res.status !== 200) return this.$message.error('获取失败');
          console.log(res);
          this.setProfile(res.data);
          sessionStorage.setItem('profile',JSON.stringify(res.data));
          this.editForm = res.data;
          this.imgUrl = this.avatarUrl;
      },
      // 修改用户信息
      async editUserInfo(){
         //提交更新后的信息
         this.editForm.avatarUrl = this.imgUrl;
          const {data:res} = await Api.editUser(this.editForm);
          console.log(res);
          if(res.status !== 200) return this.$message.error('修改失败');
          this.$message.success('资料更新成功');
          this.getUserInfo();
      },
      // 上传头像
       handleAvatarSuccess(res, file) {
         console.log('res',res.url);
  
         this.imgUrl = URL.createObjectURL(file.raw);
         this.imgUrl = res.url;
        
      },
      beforeAvatarUpload(file) {

        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
    
}
</script>

<style scoped lang="less">
  .profileBox{
      margin-top:20px;
      width:1200px;
      height:450px; 
      border-radius: 8px;
   
      display: flex;
      padding: 10px;
      justify-content: center;
      flex-wrap: wrap;
 
    
      
  }
  .avatarBox{
      width: 160px;
      height: 170px;
      >img{
         width: 100%;
         height: 100%;  
      }
  
      border-radius: 5px;
      margin-right: 30px;
      margin-left: 50px;
      overflow: hidden;
      
  }
  .infoBox{
     width: 500px;
     height: 180px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
     border-left: 2px solid rgb(184, 179, 179);
     padding-left: 20px;
  }
  .infoBox span{
    font-size: 1.2em;
    color: rgb(26, 95, 95);
  }
  .infoBox div{
    margin-bottom: 5px;
  }
  .describeBox{
    width: 650px;
    height: 150px;
    >textarea{
      width: 500px;
      height: 100%;
      font-size: 1.5em;
    }
  }
   .el-tabs{
     margin-top: 5px;
   }
   .editBox{
     width: 600px;
     height: 450px;
     margin-left: 20px;
     display: flex;
     justify-content: space-evenly;
  
   }
   .btns{
     float: right;
   }
   .avatar-uploader{
     height: 200px;
   }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #ddd
  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
    transition: all 0.2s linear;
  }
  .avatar:hover{
    opacity: .5;
  }
  .avatarBox .title{
    text-align: center;
    color: #606266;
  }

</style>